// import React from 'react'
// import { Table,Space,Button } from 'antd'
// import type { ColumnsType } from 'antd/es/table';
// import {DeleteOutlined,EditOutlined} from '@ant-design/icons'
// import type { ITodoItem, ITodos } from '../api/todos/model/todosTypes';
// export default function TablePage() {
//     const columns: ColumnsType<ITodoItem> = [
//         {
//             title: '序号',
//             // 指定渲染数据源中的哪个字段
//             dataIndex:'id'
//         },
//         {
//             title: '事项',
//             dataIndex:'title'
//         },
//         {
//             title: '是否已完成',
//             dataIndex:'isDone',
//             /**render 自定义渲染内容 */
//             /**
//              * 
//              * @param value 当没有配置 dataIndex的时候，value就是row，配置了dataIndex value就是当前条记录 dataIndex 字段的值
//              * @param row 当前条记录的行对象
//              * @param index  索引
//              * @returns 
//              */
//             render(value:boolean,row:ITodoItem,index:number){
//                 console.log('value: ', value);
//                 console.log('row: ', row);
//                 console.log('index: ', index);
//                 return value ? '已完成' : '未完成'
//             }
//             // render(isDone:any){
//             //     return isDone ? '已完成' : '未完成'
//             // }
//         },
//         {
//             title: '操作',
//             render(row:ITodoItem){
//                 return (
//                     <Space>
//                         <Button type='primary' danger icon={<DeleteOutlined />}></Button>
//                         <Button type='primary' icon={<EditOutlined />}></Button>
//                     </Space>
//                 )
//             }
//         }
//     ]

//     const todos:ITodos = [
//         {
//             id: 1,
//             title: '吃饭',
//             isDone: true
//         },
//         {
//             id: 2,
//             title: '睡觉',
//             isDone: true
//         },
//         {
//             id: 3,
//             title: '玩游戏',
//             isDone: false
//         }
//     ]
//     return (
//         <div>
//             <Table
//                 /**指定遍历的 key 唯一不重复 一般用id 也可以用 index */
//                 rowKey={'id'}
//                 /**dataSource 指定表格渲染的数据源 */
//                 dataSource={todos}
//                 /** 列的列名，及渲染数据源里面的哪个字段 */
//                 columns={columns}
//                 /** 分页功能 pagination */
//                 // pagination={false}  不显示分页器
//                 pagination={{
//                     // 当前页
//                     current:1,
//                     // 每页显示几条
//                     pageSize:2,
//                     // 总条数
//                     total:30,
//                     showSizeChanger:true,// 显示可选每页几条记录下拉框
//                     pageSizeOptions:[5,10,20],
//                     showQuickJumper:true, // 显示快速跳转,
//                     showTotal(total:number){
//                         return (
//                             <>
//                                 <span>总条数是: {total}</span>
//                             </>
//                         )
//                     },
//                     /**
//                      * onChange回调函数触发的时机是：1. 点击页面 2. 变更了每页显示几条
//                      * @param page 
//                      * @param pageSize 
//                      */
//                     onChange(page:number, pageSize:number){
//                         console.log('page:' , page);
//                         console.log('pageSize: ', pageSize);
//                     }
//                 }}
//             />
//         </div>
//     )
// }
import React from 'react'

export default function TablePage() {
  return (
    <div>TablePage</div>
  )
}

